<template>
  <div class="toast">{{message}}</div>
</template>

<script>
import { reactive, toRefs } from 'vue';
export default {
  name: 'Toast',
  props: ['message']
}
export const useToastEffect = () =>{
    const toastData = reactive({
        showTip : false,
        toastMessage: ''
    })
    const showToast = (message) =>{
       toastData.showTip = true
       toastData.toastMessage = message
       setTimeout(()=>{
           toastData.showTip = false
           toastData.toastMessage = ''
       }, 2000)
    }
    const { showTip, toastMessage } = toRefs(toastData)
    return { showTip, toastMessage, showToast }
}
</script>

<style scoped lang="scss">
.toast{
   position:fixed;
   left:50%;
   top:50%;
   padding: .1rem;
   transform: translate(-50%, -50%);
   background: rgba(0,0,0,0.35);
   border-radius: 0.05rem;
   color: #fff;
}
</style>
